<script>
import { useAppStore } from '@/stores/app';
import useContactsStore from '@/stores/contacts';
import { mapStores } from 'pinia';
import { Button, Loading, SwipeCell } from 'vant';

export default {
  props: {
    searchText: {
      type: String,
      default: ''
    },
    searchResult: {
      type: Array,
      default: () => []
    }
  },
  components: {
    SwipeCell,
    Button,
    Loading
},
  computed: {
    ...mapStores(useAppStore, useContactsStore),
    searched() {
      if (this.searchText) {
        // 去重，根据 id
        return this.contactsStore.groups.filter(item => {
          return item.groupInfo?.Name?.includes(this.searchText) || item.groupInfo?.Member?.includes(this.searchText)
        })
      } else {
        return this.contactsStore.groups
      }
    }
  },
  data() {
    return {
    }
  },
  methods: {
    handleChat(item) {
      this.$router.push({ path: `/chat/${item.GroupId.replace('@TGS#', '@TGS$')}`, query: { name: item.groupInfo?.Name } })
    }
  },
}
</script>

<template>
  <div class="contacts-list">
    <div class="contacts-list-title">
      <span>群聊</span>
      <Loading v-if="contactsStore.groupsLoading" size="16" />
    </div>
    <div v-if="searched.length === 0" class="contacts-list-empty">暂无</div>
    <SwipeCell
      v-for="item in searched"
      :key="item.GroupId"
    >
      <div class="contacts-item" @click="handleChat(item)">
        <div class="contacts-item-info">
          <img class="contacts-item-avatar" :src="item.groupInfo?.avatar_url ?? item.avatar_url" alt="">
          <div class="contacts-item-name">
            <div class="contacts-item-nickname">{{ item.groupInfo?.Name }}</div>
            <div class="contacts-item-uid">UName: {{ item.groupInfo?.Member }}</div>
          </div>
        </div>

        <img class="contacts-item-send" src="../assets/icons/send.png" alt="">
      </div>

      <template #right>
        <!-- <Button square type="primary" text="语音" style="height: 100%;" @click="handleCall(item.friend_name)" /> -->
        <!-- <Button square type="danger" text="删除" style="height: 100%;" @click="handleRemove(item.friend_name)" /> -->
      </template>
    </SwipeCell>
  </div>
</template>
